<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>码猿博客</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="../../bootstrap/bootstrap-select/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="../../sweetAlert/sweetalert.css">
    <link rel="ICON" href="../../image/projectImage/icon1.png">
    <link rel="stylesheet" href="../../css/public.css">
    <link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../editormd/css/editormd.css" />
    <style>
    </style>
</head>
<body>
<header id="header-box">
    <nav class="navbar navbar-default m-b-0"  >
        <div class="container-fluid"  >
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" >
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./../../my_home">码猿</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="./../../my_home"><i class="fa fa-home m-r-5"></i>主页</a></li>
                    <li><a href="./../../my_library"><i class="fa fa-book m-r-5"></i>博客</a></li>
                    <li><a href="./../../externalLink"><i class="fa fa-map-signs m-r-5"></i>外链</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="javascript:" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 9px 15px">[[${#httpServletRequest.getAttribute("Username")}]]<img class="m-l-5" th:src="'./../../image/userImage/'+${#httpServletRequest.remoteUser}+'/userInfo.png'" alt=""><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a th:href="'./../../userInfo?userAccount='+${#httpServletRequest.remoteUser}">用户信息</a></li>
                            <li><a href="./../../changePassword">修改密码</a></li>
                            <li>
                                <form class="p-0" style="color: #4c4c4c;cursor: pointer;" th:action="@{./logout}" method="post" id = "logoutForm">
                                    <a style="color: #333; padding: 3px 20px" onclick="javascript:$('#logoutForm').submit()"/>退出登录</a>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="Sidebar">
        <a href="./../../my_home" title="码猿主页"><i class="fa fa-home fa-lg"></i></a>
        <a href="javascript:;" class="stick" title="置顶" style="display: none"><i class="fa fa-eject"></i></a>
    </div>
</header>

<div class="center clear" >
    <div class="card-box" id="card-box">
        <div class="container">
            <div class="details-position">
                <a href="./../../my_home">首页</a><span> > </span><a href="./../../my_library">用户</a><span> > </span><a href="javascript:;">
                编辑博客</a>
            </div>
            <div class="p-15" style="background: #FFFFFF;box-shadow: 2px 2px 5px #666;border: 1px solid #ccc">
                <div class="input-group m-b-10">
                    <span class="input-group-addon">标题</span>
                    <input type="text" v-model.trim="updateArticle.articleTitle" class="form-control" id="testTitle"  placeholder="请输入标题">
                </div>
                <span class="input-group-addon" style="border-bottom:0 ">文章内容</span>
                <div id="test-editormd">
                    <textarea name="content" style="display:none;"></textarea>
                </div>
                <div class="" style="height: 125px;">
                    <div class="input-group m-b-10">
                        <span class="input-group-addon">文章类型</span>
                        <select class="form-control selectpicker" id="select_type" v-model="selectType">
                            <option value="">--请选择文章类型--</option>
                            <option v-for="librarys in library" v-bind:value="{name:librarys.libraryName,libraryCode:librarys.libraryCode}">{{librarys.libraryName}}</option>
                        </select>
                        <span class="input-group-addon">(文章的类型，如：HTML、Java SE等等)</span>
                    </div>
                    <div class="input-group m-b-5">
                        <span class="input-group-addon">文章标签</span>
                        <input type="text" class="form-control col-sm-5" id="input_testTitle" v-model.trim="updateArticle.articleTag" placeholder="请输入标签（选填）">
                        <span class="input-group-addon color-orange">(最多添加5个标签，多个标签请用“、”隔开)</span>
                    </div>
                    <p class="text-center m-b-0">提示：请不要发布任何推广、广告（包括招聘）、政治、低俗等方面的内容，不要把博客当作SEO工具，否则可能会影响到您的使用。</p>
                </div>
                <div class="text-right m-b-15">
                    <span class="color-red m-r-10">{{formValidation}}</span>
                    <button class="btn-info btn" v-on:click="btn_update_article">修改文章</button>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="footer m-t-15">
    <div class="container text-center">
        <div class="row footer-top m-t-35">
            <div class="footer-icon">
                <a href="#" class="m-r-25" title="新浪微博"><i class="fa fa-weibo fa-2x"></i></a>
                <a href="javascript:;" class="m-r-25" title="微信"><i class="fa fa-weixin fa-2x"></i></a>
                <a href="javascript:;" class="m-r-25" title="腾讯QQ"><i class="fa fa-qq fa-2x"></i></a>
                <a href="#" title="Github"><i class="fa fa-github-alt fa-2x"></i></a>
            </div>
        </div>
        <div class="footer-link m-t-5">
            <!-- <a href="/about/us" target="_blank" title="关于我们">关于我们</a> -->
            <a href="#" target="_blank" title="企业合作" class="m-r-25">企业合作</a>
            <a href="#" target="_blank" title="人才招聘" class="m-r-25">人才招聘</a>
            <a href="#" target="_blank" title="联系我们" class="m-r-25">联系我们</a>
            <a href="#" target="_blank" title="讲师招募" class="m-r-25">讲师招募</a>
            <a href="#" target="_blank" title="常见问题" class="m-r-25">常见问题</a>
            <a href="#" target="_blank" title="意见反馈" class="m-r-25">意见反馈</a>
            <a href="#" target="_blank" title="意见反馈" class="m-r-25">慕课大学</a>
            <a href="#" target="_blank" title="友情链接">友情链接</a>
        </div>
        <div class="row footer-bottom">
            <p>ML&nbsp;&nbsp;&copy;&nbsp;2017-2017&nbsp;&nbsp;<a href="my_home.html">码猿学习网</a>&nbsp;&nbsp;版本所有</p>
        </div>
    </div>
</footer>

<script src="../../js/jquery-3.0.0.min.js"></script>
<script src="../../bootstrap/bootstrap.min.js"></script>
<script src="../../bootstrap/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="../../sweetAlert/sweetalert.min.js"></script>
<script src="../../editormd/editormd.js"></script>
<script src="../../js/vue.js"></script>

<script>
    var testEditor;
    var vm_updateArticle=new Vue({
        el: "#card-box",
        data: {
            bool_loading: true,//是否在加载数据
            library:"",
            updateArticle:'', //修改的文章
            selectType:{
                name:'',
                libraryCode:'',
            },  //类型名
            formValidation:'', //错误提示
            test:'',  //文本内容
        },
        updated:function (){
            $('.selectpicker').selectpicker('refresh');
            $('.selectpicker').selectpicker('render');
        },
        methods: {
            btn_update_article:function() {
                if(this.updateArticle.articleTitle==''){
                    this.formValidation='无文章标题'
                }else if(this.updateArticle.article==''){
                    this.formValidation='无文本内容'
                }else if(this.selectType.name==''||this.selectType==''){
                    this.formValidation='请选择文章类型'
                }else{
                    this.formValidation='';
                    this.updateArticle.libraryName=this.selectType.name;
                    this.updateArticle.libraryCode=this.selectType.libraryCode;
                    this.updateArticle.articleUrl='./libraryList/'+this.selectType.libraryCode+'/'+this.updateArticle.articleCode;
                    this.updateArticle.article=testEditor.getMarkdown();
                    var JsonStr=this.updateArticle;
                    console.log(JSON.stringify(JsonStr));
                    $.ajax({
                        type: 'POST',
                        url: './../../update_user_library',
                        data: JSON.stringify(JsonStr),
                        contentType : "application/json ; charset=utf-8",
                        success: function (data) {
                            console.log(data);
                            if(data){
                                succeed_result('编辑');
                            }else{
                                fail_result("编辑", function() {});
                            }
                        },
                        error: function(xhr, status, error) {
                            fail_result("请求服务器", function() {});
                        }
                    });
                };
            },
        },
    });


    //提交数据返回失败的结果后
    function fail_result(operation_name, fn) {
        swal({
            title: operation_name + "失败！",
            text: "请重新操作",
            type: "error",
            confirmButtonText: "确定",
        }, function(bool) {
            fn();
        });
    }

    //在后端返回处理成功的信息后询问是否要刷新页面
    function succeed_result(operation_name) {
        swal({
            title: operation_name + "成功！",
            text: "即将跳转用户界面",
            type: "info",
            confirmButtonText: "跳转",
        }, function(bool) {
            if(bool) {
                var current_href=window.location.href;
                var n=current_href.split('/');
                var userAccount=n[4];
                window.location.href='./../../userInfo?userAccount='+userAccount;
            }
        });
    }

    $(function() {
        var backButton=$(".stick");
        backButton.on('click',function(){
            $('html,body').animate({
                scrollTop:0
            },500)
        });
        $(window).on('scroll',function(){
            if($(window).scrollTop()>$(window).height()/1.5){
                backButton.show();
            }else{
                backButton.hide();
            }
        });

        //新增地址，可以将Emoji表情加载出来，官方案例的内置方法无法加载
        editormd.emoji.path = "http://www.webpagefx.com/tools/emoji-cheat-sheet/graphics/emojis/";

        var JsonStr={
            libraryType:'',
            currentPage:0,
            size:100000
        }
        $.ajax({
            type: 'GET',
            url: './../../get_my_library',
            data: JsonStr,
            success: function (data) {
                console.log(data)
                vm_updateArticle.library = data.content;
            }
        });
        var current_href=window.location.href;
        var n=current_href.split('/');
        var userAccount=n[4];
        var articleCode=n[5];
        console.log(articleCode);
        $.ajax({
            type: 'GET',
            url: './../../libraryList/get_libraryDetail',
            data: "articleCode="+articleCode,
            success: function (data) {
                console.log(data[0]);
                vm_updateArticle.updateArticle = data[0];
                vm_updateArticle.selectType.name=data[0].libraryName;
                vm_updateArticle.selectType.libraryCode=data[0].libraryCode;
                var article=data[0].article;
                console.log(article);
                testEditorMD(article);
            }
        });
    })
    
    function testEditorMD(article) {
        testEditor = editormd("test-editormd", {
            width: "100%",
            height: 750,
            path: './../../editormd/lib/',
            codeFold : true,
            saveHTMLToTextarea : true,
            markdown : article,
            searchReplace : true,
            htmlDecode : "style,script,iframe|on*",
            emoji : true,
            taskList : true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "./../../image",
        });
    }
</script>
</body>
</html>
